<!-- 学习中心  -->
<template>
	<div class="learn-panel">
		<nav-bar :back="1" :title="title"></nav-bar>
		<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
			<van-list v-if="true" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
				<div class="learn">
					<div class="article-item" v-for="(item,index) in list" :key="index" @click="goWorks(item)">
						<div :class="'article-info ' + 'article-info-article'">
							<div class="article-top">
								<van-row type="flex" justify="space-between">
									<van-col span="20">
										<div class="article-title limit-one-line">
											{{item.Title}}
										</div>
										<div class="article-synopsis limit-one-line">
											{{item.Remark}}
										</div>
									</van-col>
									<van-col span="2">
										<div class="article-icon" @click.stop="saveFav(item.IsFav, item.Id)">
											<van-image width="100%" height="100%" :src="articleIcon[item.IsFav]"></van-image>
										</div>
									</van-col>
									<van-col span="2">
										<!-- <div class="article-icon">
											<van-image width="100%" height="100%"
												:src="require('../../assets/imgs/share-icon.png')"></van-image>
										</div> -->
									</van-col>
								</van-row>
							</div>
							<div v-if="item.AttaList && item.AttaList.length > 0">
								<div v-for="(jtem, index) in item.AttaList" :key="index" class="article-accessory article-accessory-look">
									<div class="article-type">
										<van-image width="100%" height="100%" :src="accessoryImgs[jtem.AttaType]">
										</van-image>
									</div>
									<div class="article-attribute-box">
										<div class="article-name limit-one-line">	{{jtem.AttaName}}</div>
										<div class="article-attribute limit-one-line">
											格式：{{jtem.AttaName.split('.')[1]}} &nbsp; 上传时间：{{item.AddTime.substr(0,10)}}
										</div>
									</div>
									<div class="article-look">查看详情</div>
								</div>
							</div>

						
							<!-- <div v-if="item.AttaList.length > 0" >
								<div v-for="(jtem, index) in item.AttaList" :key="index" class="contribute-accessory">
									<div class="accessory-iocn">
										<van-image width="100%" height="100%" :src="accessoryImgs[3]"></van-image>
									</div>
									<div class="accessory-info">
										<div class="accessory-name limit-one-line">
											{{jtem.AttaName}}
										</div>
										<div class="accessory-type limit-one-line">
											格式：{{jtem.AttaName.split('.')[1]}} &nbsp; 上传时间：{{item.AddTime.substr(0,10)}}
										</div>
									</div>
									<div class="look-accessory" @click="viewfile(jtem.AttaUrl)">查看详情</div>
								</div>
							</div> -->
						</div>
					</div>
				</div>
			</van-list>
			<div v-else class="default-page">
				<default-page :hint="hint"></default-page>
			</div>
		</van-pull-refresh>

		<div class="learn-bottom">
			<div class="learn-bottom-btns">
				<button class="btn learn-bottom-btn learn-bottom-btn2" @click="goMyArticle">我的作品</button>
				<button class="btn main-btn learn-bottom-btn" @click="goPublish">发布作品</button>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		Toast
	} from 'vant';

	
	import {
		learn_api,
	} from '../../api/index.js'
	import NavBar from '../../components/NavBar.vue';
	import DefaultPage from '../../components/DefaultPage.vue';

	export default {
		name: 'learn',
		components: {
			NavBar,
			DefaultPage
		},
		data() {
			return {
				refreshing: false,
				loading: false,
				finished: false,

				title: '学习中心',
				hint: '暂无作品',
				pageIndex: 1,
				articleIcon: [
					require('../../assets/imgs/collect-no.png'),
					require('../../assets/imgs/collect-yes.png')
				],

				list: [],
				accessoryImgs: [
					require('../../assets/imgs/accessory-file.png'),
					require('../../assets/imgs/accessory-video.png'),
					require('../../assets/imgs/accessory-audio.png'),
					require('../../assets/imgs/accessory-link.png'),
				],
			}
		},
		activated() {
			this.onRefresh();
		},
		methods: {
			onLoad() {
				setTimeout(() => {
					if (this.refreshing) {
						this.list = [];
						Toast('刷新成功');
						this.refreshing = false;
					}

					this.getstudyworkslist(false);

					for (let i = 0; i < 10; i++) {
						this.list.push(this.list.length + 1);
					}
					this.loading = false;

					if (this.list.length >= 40) {
						this.finished = true;
					}
				}, 1000);
			},
			onRefresh() {
				// 清空列表数据
				this.finished = false;

				// 重新加载数据
				// 将 loading 设置为 true，表示处于加载状态
				this.loading = true;
				this.onLoad();
			},
			getstudyworkslist(is_push = true) {
				this.refreshing = false
				let data = {
					PageIndex: this.pageIndex,
					IsShowAll: 0,
				}
				learn_api.getstudyworkslist(data, (res) => {
					//console.log('getstudyworkslist', res)
					if (this.refreshing || !is_push) {
						this.list = res
					} else {
						this.list.push(...res)
					}
					this.refreshing = false
					if (res.length < 20) {
						this.finished = true //已全部加载
					}
				})
			},
			goMyArticle() {
				this.$router.push({
					name: 'lcontribute-list',
					params: {
						type: 1
					}
				})
			} ,
			goPublish() {
				this.$router.push({
					name: 'lsubmit-contribute',
					params: {
						type: 1
					}
				})
			},
			goWorks(item){
				this.$router.push({path:'/works',query:{id:item.Id}});
			},
			saveFav(flag, Id) {
				if (flag) {
					learn_api.deluserfavorite({Id:Id}, (res) => {
						console.log('res', res)
							Toast('取消成功')
							this.onRefresh();
					})
					return ;
				}
				learn_api.adduserfavorite({Id:Id}, (res) => {
					console.log('res', res)
					Toast('收藏成功')
					this.onRefresh();
				})
			}
		}
	}
</script>

<style scoped>
	.learn-panel {
		padding: 0.88rem 0 1.4rem;
		min-height: 100vh;
		background-color: #F6F5FB;
	}

	.learn {
		min-height: calc(100vh - 0.88rem);
		padding-top: 0.1rem;
		margin-bottom: constant(safe-area-inset-bottom);
	}

	.article-item {
		background-color: #FFFFFF;
		margin: 0 0 0.1rem;
	}

	.article-info {
		padding: 0.2rem 0.28rem 0.2rem;
		text-align: left;
	}

	.article-info-article {
		padding-bottom: 0.3rem;
	}

	.article-title {
		height: 0.44rem;
		font-size: 0.32rem;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #000000;
		line-height: 0.44rem;
		margin-top: 0.1rem;
	}

	.article-synopsis {
		height: 0.34rem;
		font-size: 0.24rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
		line-height: 0.34rem;
		margin-top: 0.12rem;
	}

	.article-accessory {
		width: 6.4rem;
		height: 1.12rem;
		margin-top: 0.2rem;
		background: #F8F8F8;
		border-radius: 0.1rem;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.article-accessory-look {
		width: 6.96rem;
	}

	.article-type {
		width: 0.6rem;
		height: 0.6rem;
		min-width: 0.6rem;
		min-height: 0.6rem;
		margin-left: 0.24rem;
	}

	.article-attribute-box {
		width: 60%;
		margin-left: 0.2rem;
	}

	.article-name {
		height: 0.56rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #000000;
		line-height: 0.56rem;
	}

	.article-attribute {
		height: 0.28rem;
		font-size: 0.2rem;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #A3A3A3;
		line-height: 0.28rem;
	}

	.article-look {
		height: 0.4rem;
		font-size: 0.28rem;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FE4B4B;
		line-height: 0.4rem;
		margin: 0 auto;
	}

	.article-icon {
		width: 0.32rem;
		height: 0.32rem;
		margin: 0.16rem auto 0;
	}

	.learn-bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: #FFFFFF;
	}

	.learn-bottom-btns {
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: constant(safe-area-inset-bottom);
	}

	.learn-bottom-btn {
		width: 3.36rem;
		height: 0.72rem;
		line-height: 0.72rem;
		margin: 0.12rem auto 0.3rem;
	}

	.learn-bottom-btn2 {
		border: 1px solid #FE4B4B;
	}
</style>
